<template>
	
	<view class="feed">
		<image class="img" src="../../../static/images/sent.png" mode="scaleToFill"></image>
		<view class="_contdropdown" @click="show=true">
			<text>{{typetext}}</text> <text><u-icon name="arrow-right" color="#9a9393"></u-icon></text>
			<!-- <u-dropdown>
				<u-dropdown-item v-model="value2" title="温度" :options="options2"></u-dropdown-item>
			</u-dropdown> -->
		</view>
		<u-popup v-model="show" mode="bottom" :closeable="true">
			<view class="type_cont">
				<!-- <u-radio-group :wrap="true" v-model="value" @change="radioGroupChange()">
				
					<u-radio class="radio" label-size="32rpx" v-for="(item,index) in typeData" :key="index" :name="item.name" @change="radioChange(index)">
						{{item.name}}
					</u-radio>
				</u-radio-group> -->
				<view class="radio_cont"  v-for="(item,index) in typeData" :key="index" @click="radioChange(index)">
					<text>{{item.name}}</text>  <u-icon v-if="states==index" name="checkbox-mark" color="#2979ff" size="30"></u-icon>
				</view>
			</view>
				
		</u-popup>
		<view class="back_cont">
			<u-input v-model="value2" :type="type" :border="border" :height="height" :custom-style="inputStyle" :auto-height="autoHeight" :disabled="disabled" maxlength="200" @input="inputFn" @focus="focusFn" @blur="blurFn" placeholder="请输入您的建议内容...至少10字"/>			
		</view>
		<view class="img_cont">
			<!-- <u-upload ref="uUpload" :action="action" @click="imagesFn" :auto-upload="false"  :before-upload="beforeUpload"></u-upload> -->
			<u-upload ref="uUpload" :action="action" max-count="1" :auto-upload="false" max-size="2097152" @on-choose-complete="oncomplete"></u-upload>
			<!-- <u-upload :action="action" :file-list="fileList" ></u-upload> -->
			<!-- 上传 -->
		</view>
		<view class="btnn">
			
		</view>
		<u-button type="primary" :custom-style="customStyle" :disabled='iSdisabled' @click="readFn">确认提交</u-button>
		<view class="mysuggest" @click="gestFn">
			我的反馈
		</view>
	</view>
</template>

<script>
	import {suggest,images} from '@/api/default.js'
	import { pathToBase64, base64ToPath } from '../../../js_sdk/gsq-image-tools/image-tools/index.js'
	export default {
		data() {
			return {
				src:'',
				states:0,
				show:false,
				// fileList:'',
				action:'https://api.sou-liang.com/api/v1/file/images',
				// value2:'您好，我是Hi维修产品经理,欢迎您给我们提出产品使用感受和建议，我们将尽快处理您提交的宝贵意见,感谢您的支持!',
				fileList:[
					{
						url: 'http://pics.sc.chinaz.com/files/pic/pic9/201912/hpic1886.jpg',
					}
				],
				value2:'',
				type:'textarea',
				border: false,
				height: 140,
				autoHeight: true,
				disabled:false,
				iSdisabled:true,
				value:'咨询',
				typetext:'咨询',
				inputStyle:{color:'#b9b9b9'},
				customStyle: {
						// marginTop: '20px', // 注意驼峰命名，并且值必须用引号包括，因为这是对象
						// color: 'red'
						backgroundColor:'#E3E3E3'
				},
				options2: [{
						label: '去冰',
						value: 1,
					},
					{
						label: '加冰',
						value: 2,
					},
				],
				typeData:[
					{
						name:'咨询',
					},
					{
						name:'建议',
					},
					{
						name:'投诉',
					},
					
				]
			}
		},
			
		watch:{
			// if(this.value2.length!=0){
				
			// }
		},
		methods: {
			gestFn(){
				uni.navigateTo({
					url:'./mysuggest/mysuggest'
				})
			},
			typeFn(){
				
			},
			focusFn(){
				// this.value2=''
			},
			blurFn(){
				// if(this.value2==''){
				// 	this.value2='您好，我是Hi维修产品经理,欢迎您给我们提出产品使用感受和建议，我们将尽快处理您提交的宝贵意见,感谢您的支持!'
				// }
			},
			inputFn(){
				this.customStyle.backgroundColor='#2979ff'
				this.inputStyle.color="#000"
				if(this.value2.length>=10){
					this.iSdisabled=false				
				}else{
					this.iSdisabled=true
				}
			},
			radioGroupChange(){
				
			},
			radioChange(e){
				this.typetext=this.typeData[e].name
				this.states=e
				this.value2=''
				this.disabled=false
				this.show=false
			},
			oncomplete(index, list){
				let iurl=index[0].url
				// const arrayBuffer = new Uint8Array([iurl])
				// const base64 = uni.arrayBufferToBase64(arrayBuffer)
				pathToBase64(iurl)
				  .then(base64 => {
					// let base = base64.replace('text/html','image/png');
					this.src=base64
					// images({name:base64}).then(res=>{
					// })
				  })
				  .catch(error => {
				    // error
				  })
				
				// urlTobase64(url) {
				// var toBase64Url;
				// uni.request({
				// url: '',
				// method: 'GET',
				// responseType: 'arraybuffer',
				// success: async res => {
				// let base64 = wx.arrayBufferToBase64(res.data); //把arraybuffer转成base64
				// toBase64Url = 'data:image/jpeg;base64,' + base64; //不加上这串字符，在页面无法显示
				// }
				// });
				// }
				
				// let coverImg：'https://img-cdn-qiniu.dcloud.net.cn/uploads/avatar/000/51/83/99_avatar_max.jpg'
				
				// this.urlTobase64(coverImg);
				
				 
			},
			beforeUpload(index, list){
				return new Promise((resolve, reject) => {
					images({name:list[index].url}).then(res => {
										// resolve()之后，将会进入promise的组件内部的then回调，相当于返回true
						resolve();
					}).catch(err => {
						// reject()之后，将会进入promise的组件内部的catch回调，相当于返回false
						reject();
					})
				})
			// images().then(res=>{
			// 	// res
			// })
			},
			readFn(){
				let {id}=uni.getStorageSync('MEMBER_INFO')
				// const user=uni.getStorageSync('MEMBER_INFO')
				let data={
					memberId:id,
					content:this.value2,
					type:this.value,
					imgs:this.src
				}
				suggest(data).then(res=>{
					if(res.code==200){						
						uni.showToast({
							title:'提交成功',
						})
						this.value2=''
						this.$refs.uUpload.clear()
						this.iSdisabled=true
					}
				})
				// this.$refs.uUpload.upload()
				
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.img_cont{
		margin-top: 20px;
	}
	.type_cont{
		width: 100%;
		padding: 30px 20px 20px;
		text-align: left;
		.radio{
			margin: 15px 0;
		}
		.radio_cont{
			font-size: 16px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			// margin: 15px 0;
			padding: 15px 0;
		}
	}
	.feed{
		// width: 100%;
		height: 100vh;
		background-color: #FFF;
		padding: 20px;
		text-align: center;
		.img{
			width: 50%;
			height: 150px;
			margin: auto;
		}
		.btnn{
			// position: flexd;
			// top: 50px;
			margin-top: 20px;
		}
		.mysuggest{
			margin-top: 20px;
			color:#2979ff;
		}
	}
	.back_cont{
		// width: 80%;
		// height: 50px;
		// line-height: 50px;
		border-radius: 5px;
		padding: 10px 15px;
		color: #9a9393;
		background-color: #fff;
		box-shadow:rgba(0, 0, 0, .3) 0px 0px 5px;
		margin-top: 30px;
	}
	._contdropdown{
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-radius: 5px;
		padding: 15px 15px;
		background-color: #fff;
		box-shadow:rgba(0, 0, 0, .3) 0px 0px 5px;
		margin-top: 20px;
		// height: 100%;
		
	}
</style>
